<template>
	<view class="gridPage flex_c">

		<view class="notice">
			<u-notice-bar icon="" color="#FFF" bgColor="transparent" :text="notice" direction="column"
				fontSize="24rpx"></u-notice-bar>
		</view>

		<!-- <view class="people_list"> -->
		<!-- <scroll-view scroll-x="true">
				<view class="people_content flex_center">
					<view class="item flex_c" v-for="(item,index) in people_list" :key="index"
						@click="onSelectPeople(item.userId)">
						<view class="avatar flex_r_around">
							<image class="user_avatar" :src="item.avatarUrl" mode="aspectFill"></image>
							<image :src="$util.prefix('liveGrid/grid_people_select.png')" class="select_image"
								v-show="select_people == item.userId"></image>
						</view>
						<text class="hidden">{{ item.userName }}</text>
					</view>
				</view>
			</scroll-view> -->
		<!-- </view> -->

		<view class="content flex_r_between">
			<view class="lucky flex_r_around">
				<LuckyGrid ref="myLucky" :rows="3" :cols="3" :blocks="blocks" :prizes="prizes" width="380rpx"
					height="516rpx" :activeStyle="activeStyle" @start="startCallBack" @end="endCallBack"
					:defaultConfig="defaultConfig" :defaultStyle="defaultStyle" />
			</view>
			<view class="start_box flex_c">
				<view class="block">
					<view class="start start1 flex_r_around" @click="startCallBack(1)">
						<view class="flex_center">
							<text>100</text>
							<image src="/static/recharge/gold_coins.png"></image>
						</view>
					</view>
					<view class="start start2 flex_r_around" @click="startCallBack(10)">
						<view class="flex_center">
							<text>1000</text>
							<image src="/static/recharge/gold_coins.png"></image>
						</view>
					</view>
					<view class="start start3 flex_r_around" @click="startCallBack(50)">
						<view class="flex_center">
							<text>5000</text>
							<image src="/static/recharge/gold_coins.png"></image>
						</view>
					</view>
				</view>

				<view class="tags block flex_c">
					<view @click="openList" class="flex_r_around">
						<text>送出记录</text>
					</view>
					<view @click="rich_modal = true" class="flex_r_around">
						<text>活动规则</text>
					</view>
					<view @click="agree_modal = true" class="flex_r_around">
						<text>法律声明</text>
					</view>
				</view>
			</view>
		</view>

		<view class="gold_box flex_r_between">
			<view class="left flex_center">
				<image src="/static/recharge/gold_coins.png"></image>
				<text>我的金币：{{ balance || 0 }}</text>
			</view>
			<view class="right flex_r_between" @click="$native.toRecharge()">
				<view style="width: 24rpx;"></view>
				<text>充值</text>
				<u-icon name="arrow-right" size="24rpx" color="#FFF"></u-icon>
			</view>
		</view>

		<!-- 中奖弹窗 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="modal" @close="modal = false" mode="center" bgColor="transparent"
				:safeAreaInsetBottom="false">
				<view class="success flex_c" @click="modal = false">
					<view class="grid">
						<u-grid :border="false" :col="getCol()">
							<u-grid-item v-for="(item,index) in success_list" :key="index">
								<view class="item flex_r_around">
									<image :src="item.img" mode="widthFix"></image>
									<view class="price flex_r_around">
										<text>×{{ item.num }}</text>
									</view>
								</view>
							</u-grid-item>
						</u-grid>
					</view>

					<view class="all_price flex_center">
						<text>礼物总价值: {{ all_price }}</text>
						<image src="/static/recharge/gold_coins.png"></image>
					</view>

					<view class="success_again" @click="startCallBack(num)">
						<image :src="$util.prefix('live/start_again.png')"></image>
					</view>

					<view class="close_text">
						点击任意区域关闭
					</view>

				</view>
			</u-popup>
		</view>

		<view class="loading flex_c" v-if="!loaded">
			<HevuLoading type="loading4" :opacity="0" loadingText="正在努力加载..." text-color="#FD2A53"
				loadingIconColor="#FD2A53" />

			<view style="height: 60rpx;"></view>
			<ProgressBar :Width="percent" Type="candy"></ProgressBar>
		</view>

		<!-- 规则 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="rich_modal" @close="rich_modal = false" mode="bottom" bgColor="transparent"
				:safeAreaInsetBottom="false">

				<view class="bottom_popup flex_c bottom_popup1">
					<view class="popup_content">
						<scroll-view scroll-y="true">
							<view class="rich">
								<view>1.有缘一线牵是超圈推出的趣味玩法，用户在赠送礼物页面或活动页面为主播赠送幸运盲盒。每个有缘一线牵盲盒100金币。</view>
								<view>2.有缘一线牵是本旨为娱乐，请理性消费。严禁未成年人参与本活动。幸运盲盒抽中的礼物直接送给选中的主播，不到用户背包。严禁任何人利用本多动进行博彩等一切违法活动。
								</view>
								<view>3.用户参与趣味活动，送一个盲盒可增加10财富等级。</view>
								<view>4.参与本活动时，可选择赠送一个，赠送10个，赠送50个。选择赠送多个时，赠送的结果累计显示。</view>
								<view>5.信用盲盒礼物奖品规格，数量如下：</view>
								<view class="table">
									<view class="header flex_center">
										<view class="item flex_r_around">
											<text>礼物</text>
										</view>
										<view class="item flex_r_around">
											<text>礼物价值(金币)</text>
										</view>
										<view class="item flex_r_around" id="no_right">
											<text>奖品数量(个)</text>
										</view>
									</view>
									<view class="table_list flex_center" v-for="(item,index) in prizeList" :key="index"
										:id="index == 7 ? 'no_bottom' : ''">
										<view class="item flex_center">
											<image :src="item.img" mode="aspectFill"></image>
											<text>{{ item.name }}</text>
										</view>
										<view class="item flex_r_around">
											<text>{{ Number(item.gold_price).toFixed(0) }}</text>
										</view>
										<view class="item flex_r_around" id="no_right">
											<text>{{
												index == 1 ? 1458
												: index == 1 ? 1924
												: index == 1 ? 3100
												: index == 1 ? 2700
												: index == 1 ? 700
												: 100
											}}</text>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>

			</u-popup>
		</view>

		<!-- 记录 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="list_modal" @close="list_modal = false" mode="bottom" bgColor="transparent"
				:safeAreaInsetBottom="false">

				<view class="bottom_popup flex_c bottom_popup2">
					<view class="popup_content">
						<scroll-view :scroll-y="true" @scrolltolower="onReach">
							<view class="list">
								<view class="item flex_center" v-for="(item,index) in list" :key="index">
									<view class="left flex_center">
										<view class="avatar">
											<image :src="item.to_avatar" mode="aspectFill"></image>
										</view>
										<view class="text">
											<view class="name hidden">送给 {{ item.to_nickname }}</view>
											<view class="info flex_center">
												<text>赠送约</text>
												<i>{{ item.prize_gold_price }}</i>
												<text>金币的礼物</text>
											</view>
											<view class="time hidden">
												<uni-dateformat :date="item.create_time*1000"
													format="yyyy-MM-dd"></uni-dateformat>
											</view>
										</view>
									</view>
									<view class="right">
										<image :src="item.gift_img" mode="aspectFill"></image>
									</view>
								</view>
							</view>
							<view class="loading_block" v-if="total > list.length">
								<u-loading-icon mode="semicircle" color="#FFF"></u-loading-icon>
							</view>
						</scroll-view>
					</view>
				</view>

			</u-popup>
		</view>

		<!-- 法律 -->
		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="agree_modal" @close="agree_modal = false" mode="bottom" bgColor="transparent"
				:safeAreaInsetBottom="false">

				<view class="bottom_popup flex_c bottom_popup3">
					<view class="popup_content">
						<scroll-view scroll-y="true">
							<view class="rich">
								<view class="text">
									1.活动期间，用户应当遵守法律法规及平台规则，如发现用户违规(包括但不限于使用外挂作弊、恶意套现、反向兑换现金、倒买倒卖、洗钱等违背诚实信用或损害其他用户、平台及任何第三方合法权益的行为)，平台有权撤销用户活动参与资格，收回全部权益，必要时追究法律责任，并有权视情况对用户采取限制、封禁帐号、冻结资金以做进一步查证处理
								</view>
								<view class="text">
									2.任何人不得利用本次活动进行博彩或其他违法行为，对于本平台用户，一经发现，本平台将立即取消用户参与资格并收回所得奖励。如行为构成犯罪，将移交司法机关处理。如给平台造成其他损失，同时应当承担赔偿责任
								</view>
								<view class="text">
									3.平台严禁并严厉打击任何以盈利为目的的线下非法交易行为任何人以本平台名义宣称或从事类似活动或恶意发放、转让、回收、奖励、欺诈等造成用户损失的，本平台无需为此承担任何法律责任
								</view>
								<view class="text">
									4.因用户操作不当或用户所在地区网络故障、支付平台网络故障、电信运营商故障、第三方其他平台限制等非平台所能控制的原因导致的用户无法参与活动、或参与失败，平台无需为此承担任何法律责任
								</view>
								<view class="text">
									5.平台可以根据本活动的实际情况，在法律允许的范围内，为保障消费者的权益，对活动规则进行变动或调整，相关变动或调整将公布在活动页面上，并于公布时即时生效
								</view>
								<view class="text">
									6.如对活动规则或其他有任何问题，请联系在线客服咨询
								</view>
								<view class="text">
									7.仅限18岁及以上用户参加，禁止未成年充值、打赏行为
								</view>
								<view class="text">
									8.适度参与活动，合理安排时间避免过度沉迷
								</view>
								<view class="text">
									9.本活动与Apple Inc,无关。
								</view>
							</view>
						</scroll-view>
					</view>
				</view>

			</u-popup>
		</view>

		<wLoading ref="loading"></wLoading>

	</view>
</template>

<script>
	import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid';
	import HevuLoading from '@/components/hevu-loading/hevu-loading.vue';
	import ProgressBar from '@/components/Progress-Bar/Progress-Bar.vue';
	import wLoading from "@/components/w-loading/w-loading.vue";
	export default {
		components: {
			LuckyGrid,
			HevuLoading,
			ProgressBar,
			wLoading
		},
		watch: {
			count: function(val, old) {
				if (val === this.load_image.length) { // 图片全部加载完成后跳转页面
					this.loaded = true;
				}
			},
		},

		data() {
			return {
				defaultConfig: {
					speed: 6,
					decelerationTime: 2000,
					accelerationTime: 2000,
				},

				defaultStyle: {
					background: '#AA7700'
				},

				blocks: [{
					padding: '10rpx 10rpx',
					borderRadius: 10
				}, ],

				activeStyle: {
					fontColor: '#552710',
				},

				prizes: [],

				// 滚动消息通知
				notice: [

				],


				// 图片预加载 数组
				load_image: [
					'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_item_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_item_active_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_start_1.png',
					'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_start_10.png',
					'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_start_50.png',
					'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_people_select.png',
					'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_box_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/tags_rich.png',
					'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/tags_list.png',
					'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_content_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/popup_success_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/popup_rich_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/popup_list_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/popup_agree_bg.png'
				],
				// 加载完成数量
				count: 0,
				// 预加载状态
				loaded: false,
				// 进度
				percent: 0,

				// 个人获奖
				model: true,
				// 规则
				rich_modal: false,
				// 记录
				list_modal: false,
				// 法律
				agree_modal: false,
				list: [],
				page: 1,
				total: 0,

				isable: true, // 防连点

				toast: false,
				people_list: [],
				select_people: 0,

				balance: 0,

				success_list: [],
				all_price: 0,
				modal: false,

				gid: 0,
				rid: 0,
				to_uid: 0,

				num: 1,

				prizeList: [],

			}
		},
		methods: {

			preventHandler() {
				return;
			},

			getCol() {
				if (this.success_list.length == 1) {
					return 1;
				} else {
					return 4;
				}
			},

			// 点击抽奖按钮触发回调
			startCallBack(num) {
				if (!this.isable) {
					return;
				}
				this.$refs.loading.open();
				this.isable = false;
				this.num = num;
				this.$post('/active.supGiftPrizeV2/setPrize', {
					num: num,
					rid: this.rid,
					to_uid: this.to_uid,
					gid: this.gid,
				}, true, () => {
					this.isable = true;
					this.$refs.loading.close();
				}).then(res => {
					this.$refs.myLucky.play()
					this.$refs.loading.close();
					this.success_list = res.data.prize_list;
					this.getAllPrice();
					this.getBlance();
					// 模拟请求接口2s后返回数据
					const index = this.prizes.findIndex((element) => element.id == res.data.prize_list[
						0].id);
					// 得到中奖索引, 开始缓慢停止
					this.$refs.myLucky.stop(index);
				})
			},

			// 抽奖结束触发回调
			endCallBack(res) {
				this.$native.sendGiftSuccess(this.success_list);
				this.isable = true;
				this.modal = true;
				this.getInit(false);
			},

			getAllPrice() {
				var price = 0;
				this.success_list.forEach(element => {
					var item_price = element.num * element.rmb_price
					price += item_price;
				});
				this.all_price = price * 10;
			},

			getInit(refresh) {
				this.$post('/active.supGiftPrizeV2/getInitInfo', {
					gid: this.gid
				}).then(res => {
					this.prizeList = res.data.prizeList;
					if (refresh) {
						for (var i = 0; i < res.data.prizeList.length; i++) {
							this.setList(i, res.data.prizeList[i]);
						}
					}

				});
			},

			setList(index, item) {
				if (index == 0) {
					this.prizes.push({
						x: 0,
						y: 0,
						borderRadius: 10,
						id: item.id,
						imgs: [{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_item_bg.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_item_active_bg.png',
								width: '100%',
								height: '100%'
							},
							{
								src: item.img,
								activeSrc: item.img,
								width: '56%',
								top: '8%'
							},
						],
						fonts: [{
							text: `${Number(item.gold_price).toFixed(0)}金币`,
							top: '61%',
							fontColor: '#FFF',
							fontSize: 10,
						}],
					});
				}

				if (index == 1) {
					this.prizes.push({
						x: 1,
						y: 0,
						borderRadius: 10,
						id: item.id,
						imgs: [{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_item_bg.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_item_active_bg.png',
								width: '100%',
								height: '100%'
							},
							{
								src: item.img,
								activeSrc: item.img,
								width: '56%',
								top: '8%'
							},
						],
						fonts: [{
							text: `${Number(item.gold_price).toFixed(0)}金币`,
							top: '61%',
							fontColor: '#FFF',
							fontSize: 10,
						}],
					});
				}

				if (index == 2) {
					this.prizes.push({
						x: 2,
						y: 0,
						borderRadius: 10,
						id: item.id,
						imgs: [{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_item_bg.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_item_active_bg.png',
								width: '100%',
								height: '100%'
							},
							{
								src: item.img,
								activeSrc: item.img,
								width: '56%',
								top: '8%'
							},
						],
						fonts: [{
							text: `${Number(item.gold_price).toFixed(0)}金币`,
							top: '61%',
							fontColor: '#FFF',
							fontSize: 10,
						}],
					});
				}

				if (index == 3) {
					this.prizes.push({
						x: 0,
						y: 1,
						borderRadius: 10,
						id: item.id,
						imgs: [{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_item_bg.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_item_active_bg.png',
								width: '100%',
								height: '100%'
							},
							{
								src: item.img,
								activeSrc: item.img,
								width: '56%',
								top: '8%'
							},
						],
						fonts: [{
							text: `${Number(item.gold_price).toFixed(0)}金币`,
							top: '61%',
							fontColor: '#FFF',
							fontSize: 10,
						}],
					});
				}

				if (index == 4) {
					this.prizes.push({
						x: 1,
						y: 1,
						borderRadius: 10,
						id: item.id,
						imgs: [{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_item_bg.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_item_active_bg.png',
								width: '100%',
								height: '100%'
							},
							{
								src: item.img,
								activeSrc: item.img,
								width: '56%',
								top: '8%'
							},
						],
						fonts: [{
							text: `${Number(item.gold_price).toFixed(0)}金币`,
							top: '61%',
							fontColor: '#FFF',
							fontSize: 10,
						}],
					});
				}

				if (index == 5) {
					this.prizes.push({
						x: 2,
						y: 1,
						borderRadius: 10,
						id: item.id,
						imgs: [{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_item_bg.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_item_active_bg.png',
								width: '100%',
								height: '100%'
							},
							{
								src: item.img,
								activeSrc: item.img,
								width: '56%',
								top: '8%'
							},
						],
						fonts: [{
							text: `${Number(item.gold_price).toFixed(0)}金币`,
							top: '61%',
							fontColor: '#FFF',
							fontSize: 10,
						}],
					});
				}

				if (index == 6) {
					this.prizes.push({
						x: 0.5,
						y: 2,
						borderRadius: 10,
						id: item.id,
						imgs: [{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_item_bg.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_item_active_bg.png',
								width: '100%',
								height: '100%'
							},
							{
								src: item.img,
								activeSrc: item.img,
								width: '56%',
								top: '8%'
							},
						],
						fonts: [{
							text: `${Number(item.gold_price).toFixed(0)}金币`,
							top: '61%',
							fontColor: '#FFF',
							fontSize: 10,
						}],
					});
				}

				if (index == 7) {
					this.prizes.push({
						x: 1.5,
						y: 2,
						borderRadius: 10,
						id: item.id,
						imgs: [{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_item_bg.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_item_active_bg.png',
								width: '100%',
								height: '100%'
							},
							{
								src: item.img,
								activeSrc: item.img,
								width: '56%',
								top: '8%'
							},
						],
						fonts: [{
							text: `${Number(item.gold_price).toFixed(0)}金币`,
							top: '61%',
							fontColor: '#FFF',
							fontSize: 10,
						}],
					});
				}
			},

			onTab(tab) {
				this.tab = tab;
				if (this.tab == 2) {
					this.page = 1;
					this.list = [];
					this.getList();
				}
			},

			preLoad() {
				for (let url of this.load_image) {
					let image = new Image()
					image.src = url
					image.onload = () => {
						this.count++
						//加载完毕事件
						// 计算图片加载的百分数，绑定到percent变量
						let percentNum = Math.floor(this.count / this.load_image.length * 100)
						this.percent = percentNum;
					}
				}

			},

			getNotice() {
				this.$get('/active.supGiftPrizeV2/getPrizeLog', {
					page: 1,
					limit: 100
				}).then(res => {
					res.data.data.forEach(element => {
						var name = element.nickname.charAt(0) + '**';;
						this.notice.push(
							`${name} 抽中了${element.prize_name}`);
					});
				});
			},

			getList() {
				this.$get('/active.supGiftPrizeV2/getMyPrizeLog', {
					page: this.page
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},

			openList() {
				this.list_modal = true;
				this.list = [];
				this.total = 1;
				this.page = 1;
				this.getList();
			},

			// 触底
			onReach() {
				if (this.total > this.list.length) {
					this.page++;
					this.getList();
				}
			},

			// 获取金币余额
			getBlance() {
				this.$post('/jinbi/getBalance', {}, false).then(res => {
					this.balance = Number(res.data.balance).toFixed(0);
				});
			},

			// 选择赠送礼物目标
			onSelectPeople(id) {
				this.select_people = id;
			},

		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			this.gid = option.gid || 0;
			this.rid = option.rid || 0;
			this.to_uid = option.to_uid || 0;
			this.getInit(true);
			this.preLoad();
			this.getNotice();
			this.getBlance();
		},

		// onReachBottom() {
		// 	if (this.total > this.list.length) {
		// 		this.page++;
		// 		this.getList();
		// 	}
		// }
	}
</script>


<style lang="less" scoped>
	.gridPage {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_box_bg.png) 0 0 no-repeat;
		background-size: 100%;
		// background-color: #FD504F;
		min-height: 100vh;
		padding-bottom: 30rpx;
		background-image: url(https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_box_bg.png), linear-gradient(to bottom, #FFD8D9 52%, #FD504F 100%);
	}

	.notice {
		width: 426rpx;
		height: 48rpx;
		border-radius: 22rpx;
		margin-top: 220rpx;

		/deep/ .u-notice-bar {
			padding: 10rpx 36rpx 10rpx 66rpx;

			text {
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}

	.people_list {
		overflow: hidden;
		height: 20rpx;
		margin: 66rpx 0 0;
		width: 600rpx;

		.people_content {
			.item {
				width: 112rpx;
				flex-shrink: 0;

				.avatar {
					position: relative;
					width: 72rpx;
					height: 72rpx;

					.user_avatar {
						width: 72rpx;
						height: 72rpx;
						border-radius: 40rpx;
					}

					.select_image {
						width: 72rpx;
						height: 72rpx;
						position: absolute;
						z-index: 2;
						top: 0;
						left: 0;
					}

				}

				text {
					font-weight: 500;
					font-size: 24rpx;
					color: #CA1E20;
					line-height: 34rpx;
				}
			}
		}
	}

	.lucky {
		width: 424rpx;
		height: 552rpx;
		background: url(https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_content_bg.png) 0 0 no-repeat;
		background-size: 100%;
		padding: 18rpx 22rpx;
	}

	.loading {
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: #FFF;
		padding-top: 20vh;
	}

	.content {
		margin-top: 108rpx;

		.start_box {
			margin-left: 14rpx;
			height: 552rpx;
			justify-content: space-between;
		}

		.start {
			width: 164rpx;
			height: 120rpx;
			// margin-bottom: 8rpx;
			border-radius: 24rpx;

			view {
				padding-top: 36rpx;

				text {
					font-size: 24rpx;
					color: #FF3A3A;
					line-height: 36rpx;
				}

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 8rpx;
				}
			}
		}

		.start1 {
			background: url('https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_start_1.png') 0 0 no-repeat;
			background-size: 100%;
		}

		.start2 {
			background: url('https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_start_10.png') 0 0 no-repeat;
			background-size: 100%;
		}

		.start3 {
			background: url('https://qiniu-cdn.maeiyun.com//h5static/liveGrid/grid_start_50.png') 0 0 no-repeat;
			background-size: 100%;
		}

		.tags {
			height: 186rpx;

			view {
				width: 164rpx;
				height: 62rpx;

				text {
					font-size: 22rpx;
					color: #F93838;
					line-height: 32rpx;
				}
			}
		}
	}

	.gold_box {
		width: 600rpx;
		margin-top: 30rpx;

		.left {
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}

		.right {
			background: #EE4444;
			border-radius: 24rpx;
			padding: 0 14rpx;
			height: 48rpx;
			flex: 1;
			margin-left: 60rpx;

			text {
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 48rpx;
			}
		}
	}

	.bottom_popup {
		height: 80vh;
		width: 100vw;
		padding: 128rpx 40rpx 40rpx;
		border-radius: 80rpx 80rpx 0 0;

		.popup_content {
			flex: 1;
			overflow: hidden;

			scroll-view {
				height: 100%;
				border-radius: 24rpx;
				overflow: hidden;
			}

			.rich {
				background: #7C0100;
				padding: 48rpx 40rpx;
				min-height: 100%;

				view {
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 36rpx;
				}

				.h20 {
					height: 32rpx;
				}
			}

			.list {
				width: 670rpx;

				.item {
					overflow: hidden;
					padding: 24rpx;
					background: #7C0100;
					border-radius: 24rpx;
					margin-bottom: 20rpx;

					.left {
						flex: 1;
						overflow: hidden;

						.avatar {
							margin-right: 24rpx;

							image {
								width: 96rpx;
								height: 96rpx;
								border-radius: 48rpx;
								border-radius: 2rpx solid #AF0006;
							}
						}

						.text {
							flex: 1;
							overflow: hidden;

							.name {
								font-weight: 500;
								font-size: 30rpx;
								color: #FFFFFF;
								line-height: 32rpx;
							}

							.info {
								margin: 4rpx 0;

								text {
									font-size: 26rpx;
									color: #FFFFFF;
									line-height: 32rpx;
								}

								i {
									font-size: 26rpx;
									color: #FFE300;
									line-height: 32rpx;
									font-style: normal;
								}
							}

							.time {
								font-size: 24rpx;
								color: rgba(255, 255, 255, 0.6);
								line-height: 34rpx;
							}
						}
					}

					.right {
						width: 96rpx;
						height: 96rpx;
						margin-left: 20rpx;

						image {
							width: 96rpx;
							height: 96rpx;
						}
					}
				}
			}

			.table {
				width: 600rpx;
				background: #D10000;
				border-radius: 16rpx;
				border: 2rpx solid #E7E786;
				overflow: hidden;
				margin-top: 18rpx;

				.header {
					.item {
						flex: 1;
						overflow: hidden;
						height: 72rpx;
						border-right: 2rpx solid #E7E786;
						border-bottom: 2rpx solid #E7E786;

						text {
							font-size: 26rpx;
							color: #FFFFDE;
							line-height: 36rpx;
						}
					}
				}

				.table_list {
					.item {
						flex: 1;
						overflow: hidden;
						height: 72rpx;
						background: #FFFFFF;
						border-right: 2rpx solid #E7E786;
						border-bottom: 2rpx solid #E7E786;

						image {
							width: 44rpx;
							height: 44rpx;
							margin: 0 12rpx 0 24rpx;
						}

						text {
							font-weight: 500;
							font-size: 22rpx;
							color: #7C0100;
							line-height: 32rpx;
						}
					}
				}

				#no_right {
					border-right: 0;
				}

				#no_bottom {
					border-bottom: 0;
				}
			}

		}
	}

	.bottom_popup1 {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/liveGrid/popup_rich_bg.png) 0 0 no-repeat;
		background-size: 100%;
		background-color: #CF141F;
	}

	.bottom_popup2 {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/liveGrid/popup_list_bg.png) 0 0 no-repeat;
		background-size: 100%;
		background-color: #CF141F;
	}

	.bottom_popup3 {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/liveGrid/popup_agree_bg.png) 0 0 no-repeat;
		background-size: 100%;
		background-color: #CF141F;
	}

	.success {
		width: 100vw;

		.grid {
			width: 100vw;
			height: 608rpx;
			background: url(https://qiniu-cdn.maeiyun.com//h5static/liveGrid/popup_success_bg.png) 0 0 no-repeat;
			background-size: 100%;
			padding: 240rpx 50rpx 0;

			.item {
				margin-bottom: 24rpx;
				width: 136rpx;
				height: 136rpx;
				border-radius: 24rpx;
				background: #FFF;
				overflow: hidden;
				position: relative;

				.price {
					height: 36rpx;
					background: #FD2A53;
					border-radius: 18rpx;
					border: 4rpx solid #FFFFFF;
					padding: 0 8rpx;
					position: absolute;
					right: 4rpx;
					bottom: 4rpx;
					z-index: 2;

					text {
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}

				image {
					width: 128rpx;
					height: 128rpx;
				}

			}
		}

		.all_price {
			margin: 0 0 24rpx;

			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 12rpx;
			}
		}

		.success_again {
			width: 212rpx;
			height: 108rpx;

			image {
				width: 212rpx;
				height: 108rpx;
			}
		}

		.close_text {
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 34rpx;
			margin-top: 24rpx;
		}

	}
</style>